<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>浏览可选课程 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* 您的原有样式保持不变 */
        .course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .course-card {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        .course-card-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        .course-card-content {
            padding: 15px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .course-card-title {
            font-size: 1.4em;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        .course-card-intro {
            font-size: 0.9em;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
            flex-grow: 1;
        }
        .course-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85em;
            color: #888;
            margin-bottom: 10px;
        }
        .course-card-price {
            font-size: 1.2em;
            font-weight: bold;
            color: #28a745;
        }
        .course-card-actions {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-top: 10px;
        }
        /* 修正：确保按钮能正确应用样式 */
        .course-card-actions .btn, .course-card-actions form button {
            flex: 1;
            padding: 10px;
            font-size: 0.9em;
            border-radius: 5px;
            text-decoration: none;
            text-align: center;
            border: none;
            cursor: pointer;
        }
        .no-results-message {
            padding: 20px;
            text-align: center;
            color: #6c757d;
            background-color: #e9ecef;
            border-radius: 8px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="container">
        <h1 class="page-title">浏览可选课程</h1>

        <div th:if="${successMessage}" class="alert alert-success" th:text="${successMessage}"></div>
        <div th:if="${errorMessage}" class="alert alert-danger" th:text="${errorMessage}"></div>

        <div class="course-grid">
            <div class="course-card" th:each="course : ${courses}">
                <img th:src="${course.couPic != null and !course.couPic.isEmpty() ? course.couPic : 'https://placehold.co/300x180/e0e0e0/555555?text=No+Image'}"
                     alt="课程封面" class="course-card-image"
                     onerror="this.onerror=null;this.src='https://placehold.co/300x180/e0e0e0/555555?text=Image+Error';">

                <div class="course-card-content">
                    <h3 class="course-card-title" th:text="${course.couName}">课程名称</h3>
                    <p class="course-card-intro" th:text="${course.couIntroduction}">课程介绍...</p>
                    <div class="course-card-meta">
                        <span>章节数: <strong th:text="${course.couCataNum}">0</strong></span>
                        <span>点赞: <strong th:text="${course.couLikeNum}">0</strong></span>
                        <span>收藏: <strong th:text="${course.couCollNum}">0</strong></span>
                    </div>
                    <div class="course-card-price">
                        价格: <span th:text="${course.couPrice.compareTo(T(java.math.BigDecimal).ZERO) == 0 ? '免费' : '¥' + course.couPrice}">¥0</span>
                    </div>

                    <div class="course-card-actions">
                        <a th:href="@{/course/detail/{id}(id=${course.id})}" class="btn btn-primary">查看详情</a>

                        <form th:action="@{/student/cart/add/{courseId}(courseId=${course.id})}" method="post" style="display: contents;">
                            <button type="submit" class="btn btn-success">加入购物车</button>
                        </form>

                        <form th:action="@{/purchase/now/{courseId}(courseId=${course.id})}" method="post" style="display: contents;">
                            <button type="submit" class="btn btn-warning">立即购买</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div th:if="${#lists.isEmpty(courses)}" class="no-results-message">
            <p>暂无可选课程。</p>
        </div>
    </div>
</div>
</body>
</html>